<template>
  <div
    class="resize-handle"
    :class="[
      `handle-${direction}`, 
      { 'handle-for-interactive': isForInteractiveComponent }
    ]"
    :style="handleStyle"
    @mousedown.stop="handleMouseDown"
    @mouseenter="isHovering = true"
    @mouseleave="isHovering = false"
  >
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed, type CSSProperties, ref, watch, inject } from 'vue';
import { useDesignStore } from '../stores/designStore';

const props = defineProps<{ 
  direction: string,
  isForInteractiveComponent?: boolean 
}>();
const emit = defineEmits(['resize-start']);
const isHovering = ref(false);

const designStore = useDesignStore();

// 获取当前尺寸信息和调整状态 - 从CanvasArea注入
const resizingState = inject('resizingState', ref(null));
const selectedComponentSize = inject('selectedComponentSize', ref({ width: 0, height: 0 }));

// 计算调整手柄的尺寸 - 交互式组件使用更大的手柄
const handleSize = computed(() => props.isForInteractiveComponent ? 12 : 8);
const halfSize = computed(() => `-${handleSize.value / 2}px`);

// Base style for the handle
const baseStyle = computed(() => ({
  position: 'absolute',
  width: `${handleSize.value}px`,
  height: `${handleSize.value}px`,
  backgroundColor: '#409eff',
  border: '1px solid #fff',
  borderRadius: '50%',
  zIndex: '100', // 确保手柄始终在组件内容之上
  boxShadow: '0 0 3px rgba(0, 0, 0, 0.3)', // 添加阴影使手柄更明显
}));

// Computed style combining base style and dynamic pointer-events
const handleStyle = computed((): CSSProperties => {
  let specificStyle: Record<string, string> = {};

  switch (props.direction) {
    case 'n': specificStyle = { top: halfSize.value, left: '50%', marginLeft: halfSize.value, cursor: 'ns-resize' }; break;
    case 'ne': specificStyle = { top: halfSize.value, right: halfSize.value, cursor: 'nesw-resize' }; break;
    case 'e': specificStyle = { top: '50%', right: halfSize.value, marginTop: halfSize.value, cursor: 'ew-resize' }; break;
    case 'se': specificStyle = { bottom: halfSize.value, right: halfSize.value, cursor: 'nwse-resize' }; break;
    case 's': specificStyle = { bottom: halfSize.value, left: '50%', marginLeft: halfSize.value, cursor: 'ns-resize' }; break;
    case 'sw': specificStyle = { bottom: halfSize.value, left: halfSize.value, cursor: 'nesw-resize' }; break;
    case 'w': specificStyle = { top: '50%', left: halfSize.value, marginTop: halfSize.value, cursor: 'ew-resize' }; break;
    case 'nw': specificStyle = { top: halfSize.value, left: halfSize.value, cursor: 'nwse-resize' }; break;
  }
  
  // Dynamically set pointer-events based on dragging state
  const pointerEventsValue: 'none' | 'auto' = designStore.isDraggingComponent ? 'none' : 'auto';

  const finalStyle: CSSProperties = {
    ...(baseStyle.value as any),
    ...(specificStyle as any),
    pointerEvents: pointerEventsValue
  };
  return finalStyle;
});

const handleMouseDown = (event: MouseEvent) => {
  // Prevent drag initiation when clicking handle
  event.preventDefault();
  event.stopPropagation();
  
  // Emit custom event with necessary data
  emit('resize-start', {
    direction: props.direction,
    startX: event.clientX,
    startY: event.clientY
  });
};

</script>

<style scoped>
/* 增强调整手柄的样式 */
.resize-handle {
  transition: transform 0.1s, background-color 0.1s;
}

.resize-handle:hover {
  transform: scale(1.2);
  background-color: #66b1ff !important;
}

/* 为交互式组件提供更显眼的调整手柄 */
.handle-for-interactive {
  opacity: 0.9;
}

.handle-for-interactive:hover {
  transform: scale(1.3);
  opacity: 1;
}
</style> 